<template>
    <div class="listView">
        <ListviewTop v-if="state.flag" :playList="state.olylist"></ListviewTop>
        <playlist v-if="state.flag" :playList="state.olylist"></playlist>
    </div>
</template>

<script>
    import {useRoute} from 'vue-router'
    import {onMounted,reactive} from 'vue'
    import playlist from "../views/Playlist"
    import { getPlaylist } from '@/api/index'
    import ListviewTop from '../views/Listview'
    import store from '@/store/index.js'
    export default {
        data() {
            return {
                playst: {},
               
            };
        },
        setup(props) {
            const Route = useRoute()
            let state = reactive({
            list:[],
            playlist:{
                creator:{},
                tracks:[]
            }       
        })
            onMounted(async ()=>{
                console.log('route',Route)
                let play =  Route.query.id
                 console.log(play)
            let jsoner = await getPlaylist(play)
            console.log('jsoner',jsoner)
            // console.log(jsoner)
            if (jsoner.data.code == 400) {  
                let obj = JSON.parse( Route.query.playlist)
                state.olylist = obj
                state.flag = true
            } else {
                state.olylist = jsoner
                state.flag = true
            }
            })
            return{
                state
            }
        },
    
        components: {
            ListviewTop,
            playlist
        },
       
   

        methods: {

        },
    };
</script>

<style lang="scss" scoped>

</style>
